<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:h="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>学生管理页面</title>
    <!-- 引入 Bootstrap 5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

    <!-- 引入 Popper.js 用于处理弹窗、提示和下拉菜单 -->
    <script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>

    <!-- 引入 Bootstrap 5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
    <style>
        /* 基本页面样式 */
        body {
            font-family: Arial, sans-serif; /* 设置字体 */
            margin: 0; /* 清除默认边距 */
            padding: 20px; /* 页面内边距 */
            background-color: #f4f4f4; /* 背景颜色 */
        }

        /* 搜索表单样式 */
        .search-form {
            margin-bottom: 20px; /* 下边距 */
            background-color: #fff; /* 表单背景颜色 */
            padding: 10px; /* 表单内边距 */
            border-radius: 5px; /* 圆角边框 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        }

        .search-form input[type="text"] {
            width: calc(100% - 120px); /* 输入框宽度 */
            padding: 8px; /* 输入框内边距 */
            border: 1px solid #ccc; /* 边框颜色 */
            border-radius: 4px; /* 圆角边框 */
        }

        .search-form button {
            padding: 8px 15px; /* 按钮内边距 */
            border: none; /* 无边框 */
            background-color: #007bff; /* 按钮背景颜色 */
            color: #fff; /* 按钮文字颜色 */
            border-radius: 4px; /* 圆角边框 */
            cursor: pointer; /* 鼠标指针样式 */
            margin-left: 10px; /* 左边距 */
        }

        .search-form button:hover {
            background-color: #0056b3; /* 悬停时背景颜色 */
        }

        /* 搜索结果列表样式 */
        .result-list {
            list-style-type: none; /* 去掉列表样式 */
            padding: 0; /* 去掉内边距 */
        }

        .result-list li {
            background-color: #fff; /* 列表项背景颜色 */
            margin-bottom: 10px; /* 下边距 */
            padding: 10px; /* 内边距 */
            border-radius: 5px; /* 圆角边框 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        }

        .result-list li:hover {
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* 悬停时阴影效果 */
        }

        /* 无结果消息样式 */
        .no-results {
            color: #888; /* 无结果消息字体颜色 */
        }
    </style>
</head>
<body>
<div th:replace="~{common :: navbar}"></div> <!-- 引入公共导航栏 -->
<form th:action="@{/search}" method="get" class="search-form mb-3"> <!-- 搜索表单 -->
    <input type="text" name="query" placeholder="Search articles..." th:value="${query}" /> <!-- 输入框 -->
    <button type="submit">Search</button> <!-- 提交按钮 -->
</form>
<div th:if="${not #lists.isEmpty(articles)}"> <!-- 检查是否有搜索结果 -->
    <ul class="result-list">
        <li th:each="article : ${articles}"> <!-- 遍历搜索结果 -->
            <h2 th:text="${article.title}">Article Title</h2> <!-- 文章标题 -->
            <p th:text="${article.content}">Article Content</p> <!-- 文章内容 -->
        </li>
    </ul>
</div>
<div th:if="${#lists.isEmpty(articles)}" class="no-results"> <!-- 如果没有搜索结果 -->
    <p>No articles found for the search query: <span th:text="${query}"></span></p> <!-- 无结果提示 -->
</div>
<form class="btn btn-primary"> <!-- 返回按钮表单 -->
    <button type="submit"  class="btn btn-primary" >返回</button> <!-- 返回按钮 -->
</form>
</body>
</html>
